<template>
  <router-view
    v-slot='{ Component, route}'
    class="router-view-c"
  >
    <transition
      :name="transitionName"
      mode='in-out'
    >
      <component :is='Component' />
    </transition>
  </router-view>
  <BackgroundMusic />
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import BackgroundMusic from "./components/BackgroundMusic";
export default {
  name: "app",
  components: {
    BackgroundMusic,
  },
  setup() {
    const transitionName = ref("tbSlide");
    const router = useRouter();
    window.onload = function () {
      document.body.addEventListener(
        "touchmove",
        function (e) {
          e.preventDefault();
        },
        { passive: false }
      );
    };
    let mybody = document.getElementsByTagName("body")[0];
    var startX, startY, moveEndX, moveEndY, X, Y;
    mybody.addEventListener(
      "touchstart",
      (e) => {
        startX = e.touches[0].pageX;
        startY = e.touches[0].pageY;
      },
      true
    );
    mybody.addEventListener("touchmove", (e) => {
      moveEndX = e.changedTouches[0].pageX;
      moveEndY = e.changedTouches[0].pageY;
      X = moveEndX - startX;
      Y = moveEndY - startY;
      if (Math.abs(Y) > Math.abs(X) && Y > 0) {
        transitionName.value = "back";
        router.back();
      } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
        transitionName.value = "tbSlide";
        router.go(1);
      }
    });
    return {
      transitionName,
    };
  },
};
</script>
  
<style lang="scss">
#app {
  background: url("./assets/imgs/bg1.jpg") no-repeat;
  background-size: cover;
  font-family: myFont;
}
.router-view-c {
  transition: all 0.5s ease;
  width: 100%;
}

.tbSlide-enter {
  opacity: 0.5;
  transform: translateY(100%);
}

.tbSlide-leave-active {
  opacity: 0.5;
  transform: translateY(-100%);
}

.back-enter {
  opacity: 0.5;
  transform: translateY(-100%);
}

.back-leave-active {
  opacity: 0.5;
  transform: translateY(100%);
}
</style>
